<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/my_index_sty.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body {
            /* url() 为自定义鼠标样式路径 */
            cursor: url(image/pointer.png),auto;

        }
        .top{
            border-radius: 5rem;
            height: 4rem;
            width: 1140px;
            border: solid 1px ;
        }

        #reviews{
            width: 97.8%;
            background-color: rgba(207, 207, 207, 0.2);
            height: 200px;
            margin-top: 1.5rem;
            border-radius: 1rem;
        }
        #reviews_text{
            top: 11rem;
            background-color: rgba(255, 255, 255,0.8);
            border: none;
            position: absolute;
            left: 25.5rem;
            width: 65rem;
            font-size: 2rem;
            height: 7rem;
            resize: none;
            
        }
        .btn{
            border-radius: 2rem;
            height: 3rem;
            width: 5rem;
        }

        .comment_on_list{
            width: 97.8%;
            height: 300px;
            border-radius: 1rem;
            margin-top: 3.1rem;
            background-color:rgba(251, 164, 1,0.2) ;
        }
    </style>
</head>
<body>
    
    

    <!-- 顶部状态 -->
    <div class="top " style="user-select:none;">
        <h3 class="text-center" style="margin-top: 0.8rem; ">
            <label for="" > 当前用户: {{username}}</label>
        </h3>
    </div>

    <div class="container">

         <!-- 评论编辑 -->
         <div class="reviews_edit">
            <div id="reviews">
                <img src="image/contradiction.jpg" alt="">
                <!-- 登录用户昵称 -->
                <p id="login_username" style="position: absolute; top: 8rem; left: 28.5rem; user-select:none;">{{username}}</p>
                <textarea id="reviews_text" class="form-control align-middle" placeholder="有趣的想法稍纵即逝，赶紧记录下来叭" name="introduce" id="it" cols="30" rows="10"></textarea>
                <!-- 输入字符及字数上线 -->
                <p id="printing_number" style="text-align: right; margin-top: 6rem; margin-right: 2rem; user-select:none;">{{printing_Number}}/5000</p>
                <div>
                    <p style="position:absolute; top: 20rem; left: 24.3rem;">图标1</p>
                    <p style="position:absolute; top: 20rem; left: 27.3rem;">图标2</p>
                    <button type="button" class="btn btn-warning" id="publish" style="position:absolute; top: 19rem; right: 24.2rem;">发表</button>
                </div>
                
         </div>

        <br>
        <!-- 评论列表 -->
        <div class="comment_on_list">
            <div class="row">
                <div class="col-sm">
                </div>
                <div class="col-sm" id="saysaymsg">
                    {% for msg in msgs %}
                    <div class="card border-primary shadow" style="width: 50rem;">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-sm-10">{{msg.content}}</div>
                                <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                        data-toggle="modal" data-target="#comment"
                                        onclick="sayComment('{{msg.id}}')">吐槽一下</button>
                                </div>
                            </div>
    
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush" id="{{msg.id}}">
                                {% for comment in msg.comments %}
                                <li class="list-group-item">
                                    <blockquote class="blockquote mb-0">
                                        <p>{{comment.content}}</p>
                                        <footer class="blockquote-footer">
                                            <cite title="Source Title">{{comment.comUserName}}</cite>&nbsp;&nbsp;对
                                            <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                                        </footer>
                                    </blockquote>
                                </li>
                                {% endfor %}
                            </ul>
    
                        </div>
                        {% endfor %}
                    </div>
    
    
                </div>
                <div class="col-sm">
                </div>
            </div>
        </div>
    
    
        <!-- 发表说说  -->
        <div class="modal fade" id="saysomething" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="sayMsg">
                                <!-- <small id="passwordHelpInline" class="text-muted">
                                Must be 8-20 characters long.
                              </small> -->
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saysay()">发表</button>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- 吐槽一下 -->
        <div >
            <div class="modal-dialog invisible">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">吐槽一下</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control" aria-describedby="passwordHelpInline"
                                    id="commentMsg">
                                <!-- <small id="passwordHelpInline" class="text-muted">
                                Must be 8-20 characters long.
                              </small> -->
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="comment()">吐槽</button>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="js/index_change.js"></script>
    <script src="js/a.js"></script>
    <script src="js/b.js"></script>
    <script>
       // 保存当前说说的id
       let currentMsgId = '';
        function sayComment(msgId) {
            currentMsgId = msgId;
        }
        // 发表说说
        function saysay() {
            axios({
                method: 'post',
                url: '/say',
                data: {
                    sayMsg: $('#sayMsg').val()
                }
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 根据服务返回的信息，拿到说说的信息，借助模板引擎，渲染这一段dom
                    let data = JSON.parse(res.data);
                    let html = `
                    <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-10">${data.content}</div>
                            <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                    data-toggle="modal" data-target="#comment" onclick="sayComment(${data.id})">吐槽一下</button>
                            </div>
                        </div>

                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="${data.id}">
                        </ul>

                    </div>
                </div>
                `
                // 将渲染好的这段dom，插入到指定id节点的内部最前面
                $("#saysaymsg").prepend(html);

                    // window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
        // 吐槽一下
        function comment() {
            axios({
                method: 'post',
                url: '/comment',
                data: {
                    commentMsg: $('#commentMsg').val(),
                    msgId: currentMsgId
                },
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 获得评论信息，渲染指定的dom片段
                    let data = res.data;
                    let html = `
                    <li class="list-group-item">
                        <blockquote class="blockquote mb-0">
                            <p>${data.content}</p>
                            <footer class="blockquote-footer">
                                <cite title="Source Title">${data.fromUserName}</cite>&nbsp;&nbsp;对
                                <cite title="Source Title">${data.toUserName}</cite>&nbsp;&nbsp;说
                            </footer>
                        </blockquote>
                    </li>
                    `;

                    // 将渲染好的dom片段，插入到指定id节点的最后面
                    $("#" + data.msgId).append(html);
                }else{
                    console.log('2000判断不通过');
                }
            }).catch((err) => {
                console.log(err);
            });
        }
        // 注销登录
        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
    </script>
</body>
</html>